<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
<head th:include="common/head :: head"></head>
<body class="gray-bg">
<form id="ec" th:action="@{/role}" method="post">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <table class="table form-table margin-bottom10">
                            <tr>
                                <td>
                                    <input type="text" name="roleName" th:value="${#maps.containsKey(filters, 'roleName')} ? ${filters.roleName} : ''" placeholder="角色名称" class="input-sm form-control"/>
                                </td>
                            </tr>
                        </table>
                        <div>
                            <button type="button" class="btn btn-sm btn-primary" onclick="javascript:document.forms.ec.pageNum.value=1;document.forms.ec.submit();">搜索</button>
                            <button type="button" class="btn btn-sm btn-primary create" sec:authorize="hasAuthority('role.create')">新增</button>
                            <button type="button" id="loading-example-btn" onclick="javascript:window.location.reload();" class="btn btn-white btn-sm">刷新</button>
                        </div>
                        <table class="table table-striped table-bordered table-hover dataTables-example">
                            <thead>
                            <tr class="text-center">
                                <th>序号</th>
                                <th>角色名称</th>
                                <th>角色编码</th>
                                <th>描述</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="gradeX" th:each="item,it : ${page.list}">
                                <td class="text-center" th:text="${it.count}">11</td>
                                <td th:text="${item.roleName}">22</td>
                                <td th:text="${item.roleCode}">33</td>
                                <td th:text="${item.description}">33</td>
                                <td th:text="${#dates.format(item.createTime,'yyyy-MM-dd HH:mm:ss')}" >33</td>
                                <td class="text-center">
                                    <a class="edit" th:attr="data-id=${item.id}" sec:authorize="hasAuthority('role.edit')">修改</a>
                                    <a class="delete" th:attr="data-id=${item.id}" sec:authorize="hasAuthority('role.delete')">删除</a>
                                    <a class="assign" th:attr="data-id=${item.id}" sec:authorize="hasAuthority('role.assign')">分配权限</a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <!--<div class="row">
                            <div class="col-sm-6">
                                <div class="dataTables_info" id="DataTables_Table_0_info" role="alert" aria-live="polite" aria-relevant="all">显示
                                    <span th:text="${page.startRow}"></span> 到 <span th:text="${page.endRow}"></span> 项，共 <span th:text="${page.total}"></span> 项
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
                                    <ul class="pagination">
                                        &lt;!&ndash;如果不是第一页,则可以跳转到第一页&ndash;&gt;
                                        <li class="paginate_button previous" th:if="${!page.isFirstPage}">
                                            <a href="javascript:document.forms.ec.pageNum.value=1;document.forms.ec.submit();">首页</a>
                                        </li>
                                        &lt;!&ndash;如果是第一页,则不能点&ndash;&gt;
                                        <li class="paginate_button previous" th:if="${page.isFirstPage}">
                                            <a href="javascript:void(0)">首页</a>
                                        </li>
                                        &lt;!&ndash;如果不是第一页,则可以点击上一页&ndash;&gt;
                                        <li class="paginate_button previous" th:if="${!page.isFirstPage}">
                                            &lt;!&ndash;<a th:href="'javascript:document.forms.ec.pageNum.value='+${page.prePage}+';document.forms.ec.submit();'">上一页</a>&ndash;&gt;
                                            <a th:href="|javascript:document.forms.ec.pageNum.value=${page.prePage};document.forms.ec.submit();|">上一页</a>
                                        </li>
                                        &lt;!&ndash;如果是第一页,则不能跳转到上一页&ndash;&gt;
                                        <li class="paginate_button previous disabled" aria-controls="DataTables_Table_0" tabindex="0"
                                            id="DataTables_Table_0_previous" th:if="${page.isFirstPage}">
                                            <a href="javascript:void(0)">上一页</a>
                                        &lt;!&ndash;中间导航栏&ndash;&gt;
                                        <li th:each="i : ${page.navigatepageNums}"
                                            th:class="${i == page.pageNum} ? 'paginate_button active' : 'paginate_button'">
                                            <a th:href="|javascript:document.forms.ec.pageNum.value=${i};document.forms.ec.submit()|">
                                                <span th:text="${i}"></span>
                                            </a>
                                        </li>
                                        &lt;!&ndash;如果不是最后一页,则可以点击下一页&ndash;&gt;
                                        <li class="paginate_button next" aria-controls="DataTables_Table_0" tabindex="0"
                                            id="DataTables_Table_0_next" th:if="${!page.isLastPage}">
                                            <a th:href="|javascript:document.forms.ec.pageNum.value=${page.nextPage};document.forms.ec.submit()|">下一页</a>
                                        </li>
                                        &lt;!&ndash;如果是最后一页,则不可以点击下一页&ndash;&gt;
                                        <li class="paginate_button next disabled" th:if="${page.isLastPage}">
                                            <a href="javascript:void(0)">下一页</a>
                                        </li>
                                        &lt;!&ndash;如果是不是最后一页,则可以点击尾页&ndash;&gt;
                                        <li class="paginate_button next" th:if="${!page.isLastPage}">
                                            <a th:href="|javascript:document.forms.ec.pageNum.value=${page.pages};document.forms.ec.submit()|">尾页</a>
                                        </li>
                                        &lt;!&ndash;如果是最后一页,则不可以点击尾页&ndash;&gt;
                                        <li class="paginate_button next" th:if="${page.isLastPage}">
                                            <a href="javascript:void(0)">尾页</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>-->
                        <div class="row" th:include="common/pagination :: pagination"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
</body>
<script>
    // 使用jquery开发 window.onload = $(function() {}),页面加载完成之后,再调用
    $(function () {
        $(".create").on("click", function () {
            opt.openWin("[[@{/role/create}]]","新增",580,430);
        });
        // $(".edit").on("click", function () {
        //     var id = $(this).attr("data-id");
        //     opt.openWin('/role/toEdit/' + id,'修改',580,460);
        // });
        $(".edit").click(function () {
            var id = $(this).attr("data-id");
            opt.openWin('/role/toEdit/' + id,'修改',580,460);
        });
        $(".delete").click(function () {
            var id = $(this).attr("data-id");
            opt.confirm('/role/delete/'+id,'您确认要删除该角色吗?');
        });
        $(".assign").click(function () {
            var id = $(this).attr("data-id")
            opt.openWin('/role/assignShow/' + id,'修改',580,430)
        })
     })
</script>
</html>